<!DOCTYPE html>
<html>
    <head>
        <title>CSGShape</title>
        <meta charset="UTF-8">   
        <style>
            html, body {
                padding: 0px;
                margin: 0px;                
            }            
            .main {
                margin: 0px;
                padding: 0px;
                position: absolute;
                top: 0px;
                bottom: 0px;
                left: 0px;
                right: 0px;
            }
        </style> 
        <script src="../../../../lib/core/ht.js"></script> 
        <script src="../../../../lib/plugin/ht-modeling.js"></script>   
        <script src="../../../../lib/plugin/ht-xeditinteractor.js"></script>
        <script>                
                                    
            ht.Default.setImage('ac1', '');
            ht.Default.setImage('ac2', '');
            ht.Default.setImage('ac3', '');            
            ht.Default.setImage('plant', '');
            ht.Default.setImage('hightopo', '');
            ht.Default.setImage('brick', '');            
            ht.Default.setImage('door', '');

            function init(){                                 
                dm = new ht.DataModel();                
                g3d = new ht.graph3d.Graph3dView(dm);   
                g2d = new ht.graph.GraphView(dm);                   
                mainSplit = new ht.widget.SplitView(g3d, g2d, 'v', 0.6);   
                
                view = mainSplit.getView();  
                view.className = 'main';
                document.body.appendChild(view);    
                window.addEventListener('resize', function (e) {
                    mainSplit.invalidate();
                }, false);                         
              
                g3d.setMoveStep(20);
                g3d.setGridVisible(true); 
                g3d.setEye(0, 500, 1000);
                g3d.setGridColor([0.9, 0.9, 0.9, 1.0]);
                g3d.getBrightness = function(data){
                    return null;
                };               
                                              
                g2d.setEditable(true);
                g2d.translate(430, 100);
                g2d.adjustZoom = function(value){
                    if(value < 0.1){
                        return 0.1;
                    }
                    if(value > 2){
                        return 2;
                    }
                    return value;                
                };                
                g2d.setZoom(0.2, true, {x: 0, y: 0});
                g2d.setHelperEditableFunc(function(data, helper) {
                    if (helper === 'host') {
                        return true;
                    }
                    return false;
                });
                
                wall = new ht.CSGShape();
                wall.setClosePath(true);
                wall.setTall(240);
                wall.setElevation(120);
                wall.setThickness(20);
                wall.setPoints([
                    {x: -400, y: -400},
                    {x: 400, y: -400},
                    {x: 400, y: 400},
                    {x: -400, y: 400}
                ]);
                wall.s({
                    'shape.border.width': 20,
                    'shape.border.color': '#898989',
                    'all.color': '#5D5D5D',
                    'back.image': 'brick',
                    'back.uv.scale': [1, 10],
                    'repeat.uv.length': 40,
                    'front.color': 'lightgray',
                    'csg.color': '#DDDDDD'
                });
                dm.add(wall);
                
                door1 = new ht.DoorWindow();
                door1.setTall(200);
                door1.setElevation(100);  
                door1.setWidth(100);
                door1.setHost(wall);
                door1.s({
                    'attach.index': 2,
                    'attach.offset': 100,
                    'attach.offset.opposite': true,
                    'shape.background': 'yellow',                    
                    'dw.axis': 'right',
                    'all.image': 'door',
                    'back.uv': [1,0, 1,1, 0,1, 0,0]
                });
                door1.setExpanded(true, true);
                dm.add(door1);
                
                door2 = new ht.DoorWindow();
                door2.setTall(200);
                door2.setElevation(100);  
                door2.setWidth(100);
                door2.setHost(wall);
                door2.s({
                    'attach.index': 2,
                    'attach.offset': 100,
                    'shape.background': 'yellow',
                    'all.image': 'door',
                    'front.uv': [1,0, 1,1, 0,1, 0,0]
                });                
                dm.add(door2);                
                              
                window1 = new ht.DoorWindow();
                window1.setTall(100);
                window1.setElevation(140);  
                window1.setWidth(100);                                               
                window1.setHost(wall);
                window1.s({
                    'attach.index': 2,
                    'attach.offset': 0.5,
                    'attach.offset.relative': true,
                    'shape.background': 'yellow',
                    'all.color': 'rgba(0, 50, 50, 0.75)',
                    'all.transparent': true,
                    'all.reverse.cull': true,
                    'dw.axis': 'top',
                    'dw.end': -Math.PI/6
                });
                window1.setExpanded(true, true);
                dm.add(window1);                                
                
                window2 = new ht.DoorWindow();
                window2.setTall(150);
                window2.setElevation(120);  
                window2.setWidth(700);                                               
                window2.setHost(wall);
                window2.s({
                    'attach.index': 3,
                    'attach.offset': 0.5,
                    'attach.offset.relative': true,
                    'shape.background': 'yellow',
                    'all.color': 'rgba(0, 50, 50, 0.75)',
                    'all.transparent': true,
                    'all.reverse.cull': true,
                    'dw.toggleable': false
                });
                dm.add(window2);
                
                closet1 = new ht.CSGBox();
                closet1.setTall(100);
                closet1.setElevation(120);  
                closet1.setWidth(100);  
                closet1.setHost(wall);
                closet1.s({
                    'attach.index': 0,
                    'attach.offset': 0.25,
                    'attach.offset.relative': true,
                    'attach.gap': 0.05,
                    'attach.gap.relative': true,
                    'attach.thickness': 0.901,
                    'attach.cull': true,
                    'all.reverse.color': 'yellow',
                    'front.visible': true,
                    'front.color': 'rgba(0, 50, 50, 0.75)',
                    'front.transparent': true,
                    'front.reverse.flip': true,
                    'front.end': Math.PI * 0.6,
                    'front.toggleable': true,
                    'shape.background': 'yellow'
                });
                closet1.setFaceExpanded('front', true, true);
                dm.add(closet1);
                
                closet2 = new ht.CSGNode();
                closet2.setTall(100);
                closet2.setElevation(120);  
                closet2.setWidth(100);  
                closet2.setHost(wall);
                closet2.s({
                    'attach.index': 0,
                    'attach.offset': 200,  
                    'attach.offset.opposite': true,
                    'attach.gap': 1,
                    'shape.background': 'yellow',
                    'all.visible': false
                });
                dm.add(closet2);  
                
                frame1 = new ht.CSGNode();
                frame1.setTall(200);
                frame1.setElevation(100);  
                frame1.setWidth(110);  
                frame1.setHost(wall);
                frame1.s({
                    'attach.index': 1,
                    'attach.offset': 0.5,  
                    'attach.offset.relative': true,
                    'shape.background': 'yellow',
                    'all.visible': false
                });
                dm.add(frame1);                  
                
                ac1 = new ht.Node();
                ac1.setTall(50);
                ac1.setElevation(180);  
                ac1.setWidth(160);  
                ac1.setHeight(20);
                ac1.setHost(wall);
                ac1.s({
                    'front.image': 'ac1',
                    'all.color': 'gray',
                    'attach.index': 1,
                    'attach.offset': 0.25,
                    'attach.offset.relative': true,
                    'attach.gap': 20,
                    'shape': 'rect',
                    'shape.background': 'red'
                });
                dm.add(ac1);
                
                ac2 = new ht.Node();
                ac2.setTall(180);
                ac2.setElevation(90);  
                ac2.setWidth(80);  
                ac2.setHeight(30);
                ac2.setHost(wall);
                ac2.s({
                    'front.image': 'ac2',
                    'all.color': 'gray',
                    'attach.index': 3,
                    'attach.offset': 200,
                    'attach.offset.opposite': true,
                    'attach.gap': 25,
                    'shape': 'rect',
                    'shape.background': 'gray'
                });
                dm.add(ac2);  
                
                ac3 = new ht.Node();
                ac3.setTall(60);
                ac3.setElevation(40);  
                ac3.setWidth(80);  
                ac3.setHeight(20);
                ac3.setHost(wall);
                ac3.s({
                    'back.image': 'ac3',
                    'all.color': 'gray',
                    'attach.index': 2,
                    'attach.offset': 230,
                    'attach.offset.opposite': true,
                    'attach.gap': -20,
                    'shape': 'rect',
                    'shape.background': 'gray'
                });
                dm.add(ac3);  
                
                plant = new ht.Symbol('plant', 'y', true);
                plant.s({
                    'attach.index': 1,
                    'attach.offset': 150,                    
                    'attach.gap': 70
                });
                plant.setHost(wall);
                dm.add(plant);
                
                hightopo = new ht.Symbol('hightopo');
                hightopo.setElevation(150);
                hightopo.s({
                    'attach.index': 0,
                    'attach.offset': 0.5,                    
                    'attach.offset.relative': true,                    
                    'attach.gap': 0.5,
                    'attach.gap.relative': true
                });
                hightopo.setHost(wall);
                dm.add(hightopo);
            }             
            
        </script>
    </head>
    <body onload="init();">                                
    </body>
</html>
